<template>
  <div class="bg">
    <div class="name">
      <p > <font face="隶书" size="80px" color="#a9a9a9">欢迎您注册使用松果</font></p>
    </div>

    <div id="register">

      <span style="color: red">*</span>(用户名唯一，不可修改，取个好名哦)<br><br>
      注册编号：<input type="text" v-model="obj.no"><br><br>
      用户名：&nbsp&nbsp<input type="text" v-model="obj.name"><br><br>
      联系方式：<input type="text" v-model="obj.contactInformation"><br><br>
      预约信息：<input type="text" v-model="obj.appointmentInformation"><br><br>

      <button type="button" class="btn btn-primary color" @click = "okadd()">提交</button>
      <br>

      <div class="re color"><router-link :to="{path:'/'}">注册完成</router-link></div>
        <br>默认密码为“123456”，请前往个人中心修改
    </div>

  </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "register",
        data () {
            return {
                url:this.baseURL+'ordinaryUser.ctl',
                obj: {
                    no:'',
                    name:'',
                    contactInformation:'',
                    appointmentInformation:''
                },
            }
        },
        methods: {
            okadd:function(){
                if (this.obj.no===''||this.obj.name===''||this.obj.contactInformation===''||this.obj.appointmentInformation==='') {
                alert('信息不全，请补充完整')
            }else{
                this.axios.post(this.url,this.obj)
                    .then((res) => {
                        alert("注册成功");
                        this.obj={};
                    })
                }
            }
        }
    }
</script>

<style scoped>
  .color{background-color:#E6E6E6; color: #555555}
  .name{
    width: 100%;
    text-align: center;
    padding-top: 20px;

  }
  .bg{width:100%; height:660px; background-color: #EAEDE7}

  #register{
    background-color: #E6E6E6;
    width: 415px;
    height: 400px;
    margin:50px auto;
    z-index: 1;
    box-shadow:0 0 30px rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    text-align: center;
  }
  #login input{
    margin-bottom:40px;
    line-height: 25px;
  }
  #login input:focus{
    box-shadow:0 0 10px rgba(0, 0, 0, 0.4);
  }
  #login button{
    width:100px;
    margin-left: 20px;
    border-radius: 5px;
    box-shadow:0 0 5px rgba(0, 0, 0, 0.4);;
  }
  .re{
    color: #99A0A8;
    width:100px;
    margin-left: 160px;
    margin-top: 15px;
    border-radius: 5px;
    box-shadow:0 0 5px rgba(0, 0, 0, 0.4);}
</style>
